<template>
  <div class="page-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <el-form :inline="true" :size="`default`">
        <el-form-item label="品牌">
          <el-select v-model="searchParams.brandId" placeholder="请选择品牌" filterable style="width: 125px">
            <el-option v-for="item in brandList" :key="item.brandId" :label="item.brandName"
              :value="item.brandId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车系">
          <el-select v-model="searchParams.brandId" placeholder="请选择省份" filterable style="width: 125px">
            <el-option v-for="item in brandList" :key="item.brandId" :label="item.brandName"
              :value="item.brandId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权益状态">
          <el-select v-model="searchParams.brandId" placeholder="请选择省份" filterable style="width: 125px">
            <el-option v-for="item in brandList" :key="item.brandId" :label="item.brandName"
              :value="item.brandId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="searchDateList" type="daterange" value-format="YYYY-MM-DD" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="isLoading" border stripe style="width: 100%" :size="`default`">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column prop="factoryName" label="厂商" width="140"></el-table-column>
        <el-table-column prop="brandName" label="品牌" width="150" />
        <el-table-column prop="seriesId" label="车系ID" width="100"></el-table-column>
        <el-table-column prop="seriesName" label="车系" width="180"></el-table-column>
        <el-table-column prop="levelName" label="级别" width="150"></el-table-column>
        <el-table-column prop="seriesState" label="车系状态" width="90" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.seriesState === 20">在售</el-tag>
            <el-tag type="success" v-else-if="scope.row.seriesState === 30">停产在售</el-tag>
            <el-tag type="success" v-else>{{ scope.row.seriesState }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hasNewEnergy" label="是否新能源" width="105" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.hasNewEnergy">是</el-tag>
            <el-tag type="error" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="权益状态" align="center" width="100">
          <template #default="scope">
            <el-link type="success" v-if="scope.row.benefitBindingState === 1">已关联</el-link>
            <el-link type="danger" v-else>未关联</el-link>
          </template>
        </el-table-column>
        <el-table-column label="权益有效期" align="center">
          <template #default="scope">
            {{ scope.row.benefitStartTime ? `(${scope.row.benefitStartTime} - ${scope.row.benefitEndTime})` : '' }}
            {{ ValidStateFormat(scope.row.benefitValidState) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :size="`default`"
        :current-page="pageData.pageIndex" background v-model:page-size="pageData.pageSize" :total="pageData.rowCount"
        :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next" style="margin-top: 10px;">
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getBrandAll, getCollectorSeriesList } from '@/api/policy.api.js';
import { ref } from 'vue';
import { onMounted } from 'vue';

//------------------------------查询条件------------------------------
const searchDateList = ref<Array<string>>([]);
const searchParams = ref({ brandId: null, seriesId: null, state: null, startDate: null, endDate: null });
const brandList = ref<Array<any>>([]);

// 获取品牌列表
function getBrandList() {
  getBrandAll({}).then((res: { result: Array<any> }) => { brandList.value = res.result || []; initSearchParams(); })
}

// 初始化查询条件，并默认查询
function initSearchParams() {
  if (brandList.value.length === 0) {
    return;
  }
  searchParams.value.brandId = brandList.value[0].brandId;
  searchDataList();
}

//------------------------------查询列表------------------------------
const isLoading = ref(false);
const dataList = ref<Array<any>>([]);
const pageData = ref<{ pageIndex: number, pageSize: number, rowCount: number, list: Array<any> }>({ pageIndex: 1, pageSize: 20, rowCount: 0, list: [] });

// 数据查询
function searchDataList() {
  if (isLoading.value === true) {
    return;
  }
  isLoading.value = true;
  getCollectorSeriesList({ ...searchParams.value }).then((res: { result: Array<any> }) => {
    return (res.result || []);
  }).catch((error: any) => { console.error('获取车系权益列表时出错', error) })
    .then((list: Array<any> = []) => {
      isLoading.value = false;
      pageData.value = { pageIndex: 1, pageSize: pageData.value.pageSize, rowCount: list.length, list };
      getPageDataList();
    })
}

// 分页大小改变时触发
function handleSizeChange(value: number) {
  pageData.value.pageSize = value;
  getPageDataList();
}

// 分页大小改变时触发
function handleCurrentChange(value: number) {
  pageData.value.pageIndex = value;
  getPageDataList();
}

// 前端实现分页效果
function getPageDataList() {
  const startIndex = (pageData.value.pageIndex - 1) * pageData.value.pageSize;
  const endIndex = startIndex + pageData.value.pageSize;
  dataList.value = pageData.value.list.slice(startIndex, endIndex);
}

// 权益状态格式化
function ValidStateFormat(validState: number) {
  const stateList = [
    { state: 0, label: '已失效' },
    { state: 1, label: '生效中' },
    { state: 2, label: '待生效' }
  ];
  return stateList.find(item => item.state === validState)?.label || '';
}

onMounted(() => { getBrandList(); })
</script>

<style scoped>
.page-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}
</style>